﻿<template>
  <card>
    <div class="search-con search-con-top">
      <Button @click="add(1)" class="search-btn" type="primary">
        <Icon type="search"/>&nbsp;添加
      </Button>
    </div>

    <tree-table expand-key="categoryName" :expand-type="false" :selectionType="true" :columns="columns1" :data="data1">
      <template slot="done" slot-scope="scope">
          <Button @click="edit(scope)" type="primary" size="small">编辑</Button>
          <Button @click="delData(scope)" type="error" size="small">删除</Button>
          <template v-if="scope.row.layer!=3">
          <Button @click="add(scope)" type="primary" size="small">添加子类</Button>
          </template>
          <Button @click="addAttributes(scope)" type="warning" size="small">管理规格</Button>
          <Button @click="addAttributeGroups(scope)" type="warning" size="small">管理属性组</Button>
      </template>
    </tree-table>

    <!--编辑页面-->
    <Modal v-model="modalStatus" title="编辑"  @on-cancel="cancel" @on-ok="ok" class-name="vertical-center-modal" draggable scrollable >
      <Form :model="formItem" :label-width="80">
          <input type="hidden" v-model="formItem.categoryId"></input>
          <input type="hidden" v-model="formItem.parenteid"></input>
          <input type="hidden" v-model="formItem.layer"></input>
          <input type="hidden" v-model="formItem.createTime"></input>
          <input type="hidden" v-model="formItem.updateTime"></input>
          <input type="hidden" v-model="formItem.path"></input>
          <FormItem label="类别名称">
            <Input v-model="formItem.categoryName"></Input>
          </FormItem>
          <FormItem label="默认图标">
            <photoSingle v-if="show" v-model="formItem.categoryIco"></photoSingle>
          </FormItem>
          <FormItem label="行业">
              <Select v-model="formItem.industryId" :label-in-value="true" @on-change="selectChange" >
                  <Option v-for="selectItem in storeCategoryList" :value=selectItem.value  v-if="selectItem.layer==formItem.layer">{{selectItem.label}}</option>
              </Select>
              <input type="hidden" v-model="formItem.industryName"></input>
          </FormItem>
          <FormItem label="排序" >
            <Input type="text" v-model="formItem.displayorder" number></Input>
          </FormItem>
          <FormItem label="显示">            
            <i-Switch v-model="formItem.display" :true-value=1 :false-value=0>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-Switch>
          </FormItem>
      </Form>  
    </Modal>
  </card>
</template>

<script>
import { getStoreCategoryList } from "@/api/data";
import { getStoreCategoryInfo } from "@/api/data";
import { getIndustryList } from "@/api/data";
import { editStoreCategory } from "@/api/data";
import { addStoreCategory } from "@/api/data";
import { delStoreCategoryInfo } from "@/api/data";
import { delStoreCategoryList } from "@/api/data";
import photoSingle from './photoSingle.vue'
export default {
  name:'storeCategory',
  components: {
    photoSingle
  },
  data() {
    return {      
      show:true,
      columns1: [  
        {
          title: "编号",
          key: "categoryId"
        },
        {
          title: "名称",
          key: "categoryName"
        },
        {
          title:"操作",
          key: "categoryId",
          type: 'template',
          template: 'done'
        }
      ],
      data1: [],
      storeCategoryList:[],
      searchModel: {
        userId: 0,
        sellerId: 0,
        industryId: 0
      },
          
      //编辑页面数据
      modalStatus: false,
      formItem: {
        "categoryId": 0,
        "categoryName": "电脑数码",
        "categoryIco": "",
        "industryId": 0,
        "industryName": "",
        "parenteid": 0,
        "layer": 1,
        "haschild": 1,
        "path": "",
        "displayorder": 1,
        "display": 0,
        "createTime": 1536905512000,
        "updateTime": 1536905512000
      }
    };
  },
  methods: {
    getData() {
      //获取数据
      getStoreCategoryList(this.searchModel).then(res => {
        this.data1 = res.data.data;
      });
    },
    delData(scope) {
      //删除数据
      this.$Modal.confirm({
        title: "确认",
        content: "确认删除?",
        onOk: () => {
          delStoreCategoryInfo({Id:scope.row.categoryId}).then(res => {
            console.log(scope);
            console.log(this.data1);
            debugger;
            if (res.data.code == 1) {
              debugger;
              this.getData();
            } else {
              this.$Message.info(res.data.data);
            }
          });
        }
      });
    },

    //编辑页面方法
    edit(scope) {
      getStoreCategoryInfo({Id:scope.row.categoryId}).then(res => {
        this.show = false;
        if (res.data.code == 1) {
          this.formItem = res.data.data;
          this.modalStatus = true;
        } else {
          this.$Message.info(res.data.data);
        }
        this.$nextTick().then(()=>{
          this.show = true;
        })
      });
    },
    cancel() {
      this.modalStatus = false;
    },
    add(scope) {      
      this.formItem={
        "categoryId": 0,
        "categoryName": "电脑数码",
        "categoryIco": "",
        "industryId": 0,
        "industryName": "",
        "parenteid": 0,
        "layer": 1,
        "haschild": 1,
        "path": "",
        "displayorder": 1,
        "display": 0,
        "createTime": 1536905512000,
        "updateTime": 1536905512000
      };
      if(scope!=1){
        this.formItem.parenteid=scope.row.parenteid;
        this.formItem.layer=scope.row.layer+1;
      }
      this.modalStatus = true;
    },
    ok() {
      debugger;
      if (this.formItem.categoryId != 0) {
        //编辑
        editStoreCategory(this.formItem).then(res => {
          if (res.data.code == 1) {
            this.formItem = res.data.data;
            this.modalStatus = false;  
            this.getData();          
          } else {
            this.modalStatus = false;
            this.$Message.info(res.data.data);
          }
        });
      } else {
        //添加
        debugger;
        addStoreCategory(this.formItem).then(res => {
          if (res.data.code == 1) {
            this.formItem = res.data.data;
            this.modalStatus = false;
            this.getData();
          } else {
            this.modalStatus = false;
            this.$Message.info(res.data.data);
          }
        });
      }
    },
    dataSort(obj)//数据处理方法
    {
      for (var a in obj) {
        var model=new Object();
        model.value=obj[a].industryId;
        model.label=obj[a].industryName;
        model.layer=obj[a].layer;
        this.storeCategoryList.push(model);
        if(obj[a].child!="undefine"){
          this.dataSort(obj[a].child); //递归遍历
        }   
      }
    },
    selectChange(option){
      debugger;
        this.formItem.industryName=option.label;
    },
    addAttributes(scope){
      var id=scope.row.categoryId;
      debugger;
      const route = {
        name: 'attributesaaa',
        query: {
          id
        },
        meta: {
          title: `添加规格-${id}`
        }
      }
      this.$router.push(route)
    },
    addAttributeGroups(scope){
      var id=scope.row.categoryId;
      debugger;
      const route = {
        name: 'attribute_groups',
        query: {
          id
        },
        meta: {
          title: `添加属性组-${id}`
        }
      }
      this.$router.push(route)
    }
  },
  mounted() {
    debugger;
    this.getData(); //初始化数据
    getIndustryList().then(res => {
       var a=res.data.data[0].child;
       this.dataSort(a);
    });
  }
};
</script>



